<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>XPrecise</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}
		.container {
			width: 960px;
			position:relative;
			margin: 10px auto;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="_xprecise/xprecise.min.js"></script>
</head>
<body>
<div class="container">
	<h1>XPrecise</h1>
	<p>
	X-Precise is a simple yet effective method to achieve pixel precise results in your PSD to XHTML/CSS projects. By overlaying or underlaying a developed page with a semi-transparent image of the original design you can immediately see and repair any differences from the client's design. Using X-Precise as a method to ensure quality will save you both time and money, and your customers will be happier for it, too!
	</p>
	
	<h2>How it works?</h2>
	<p>X-Precise interface is initialized by attaching one JavaScript file to the page. An appearance of the interface can be seen on this sample page.</p>
	
	<h2>How to install?</h2>
	<p>Download the latest version of X-Precise. Unpack _xprecise folder to the root directory of your project. Attach xprecise.min.js to the page to load the X-Precise interface. X-Precise requires jQuery to run, other libraries are packed in xprecise.min.js.</p>
	<p>Create overlay images for pages you are coding. Grayscale images are recommended to see the differences better. Use JPG for the overlay and save it with the same name as the page your are working on to X-Precise folder /_xprecise/. X-Precise will automatically try to load a JPG with the same name as the page has (index.html -> index.jpg) from this folder. Of course you can load an image with different name, too. Just be sure to change the path in X-Precise interface.</p>
	
	<h3>Recommendations:</h3>
	<ul>
		<li>Try to fix the biggest differences from the client's design first. These are differences that the client can easily spot. Usually these are the exact position of various elements with fixed size like logos, banners, badges, buttons etc. They can also be custom font headings or navigation elements, alignment of the elements on the grid, padding and margin of the elements and their overall size. Keep in mind that designers often are more sensitive about their designs than you!</li>
		<li>Don't be a slave of X-Precise! Sometimes it's hard to achieve pixel accuracy, particularly in long content areas that contains long text or many repeating elements such as items listings and blog posts. This due to the fact that designers are less precise in these areas and don't use the same margin, padding etc. everywhere. A super pixel-precision usually isn't necessary in these cases, however, so you should rely more on your own eyes than X-Precise to judge if these sections look good in general.</li>
		<li>After long sections such as those mentioned above, sometimes another section may follow where pixel accuracy is desirable. This could for example be a custom bottom of the page or footer. With X-Precise, however, you can drag the overlay image over these areas and work with them until you achieve desired accuracy.</li>
		<li>Before sending the project to the client for a preview make sure you detach xprecise.js from the pages and remove /_xprecise/ folder with X-Precise and overlay images. You should backup this folder for later use.</li>
	</ul>
</div>
</body>
</html>